<!doctype html>
<html lang="zh" class="no-js"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="_csrf" th:content="${_csrf.token}"/>
    <!-- default header name is X-CSRF-TOKEN -->
    <meta name="_csrf_header" th:content="${_csrf.headerName}"/>
    <link rel="stylesheet" href="css/reset.css"> <!-- CSS reset -->
    <link rel="stylesheet" href="css/style.css"> <!-- Gem style -->
</head>
<body>
<div class="bg-back"></div>
<div style="z-index: 10000;
    position: absolute;
    top: 0;
    left:calc(50% - 244px);
		"  class="cd-user-modal is-visible"> <!-- this is the entire modal form, including the background -->
    <div class="cd-user-modal-container">
        <ul class="cd-switcher">
            <li><a href="#0" class="selected">账号密码登录</a></li>
        </ul>
        <div id="cd-login" class="is-visible is-selected"> <!-- log in form -->
            <form class="cd-form " action="/checkLogin" method="post">
                <p class="fieldset">
                    <label class="image-replace cd-username" for="username">账户名</label>
                    <input class="full-width has-padding has-border" id="username" type="phone" name="username" placeholder="请输入账户名">
                    <span class="cd-error-message">账户名错误</span>
                </p>
                <p class="fieldset">
                    <label class="image-replace cd-password" for="password">密码</label>
                    <input class="full-width has-padding has-border" id="password" type="text" name="password"  placeholder="请输入密码">
                    <span class="cd-error-message">格式错误!</span>
                    <a style="
							display: inline-block;
							position: absolute;
							right: 0px;
							cursor:pointer;
							bottom: -22px;
							font-size: 14px;
							color: #3277fc;">忘记密码?</a>
                </p>
                <p class="fieldset">
                    <label class="image-replace cd-password" for="captcha">验证码</label>
                    <input class="has-padding has-border" style="width:50%" id="captcha" type="text" name="captcha"  placeholder="请输入验证码">
                    <img src="/captcha" style="vertical-align: bottom">
                </p>
                <p class="fieldset">
                    <input type="checkbox" id="remember-me" checked>
                    <label for="remember-me">记住密码</label>
                </p>
                <p class="fieldset">
                    <input type="hidden"
                           th:name="${_csrf.parameterName}"
                           th:value="${_csrf.token}"/>
                    <input class="full-width" type="submit" value="登录">
                </p>
            </form>
        </div> <!-- cd-login -->
    </div> <!-- cd-user-modal-container -->
</div> <!-- cd-user-modal -->
</body>
</html>
